<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="ucolumns"
    :type="LableTitle.acceptAll"
    :needMoreQuery="true"
    @myEvent="myEvent"
    @setColumns="setColumns"
    @onSearch="onSearch"
    @onReset="reQuery"
  >
    <!-- 其他查询条件 -->
    <div slot="more">
      <a-form layout="inline" class="accept_more_operate_moreForm">
        <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
          <a-collapse-panel :show-arrow="false" disabled key="1" style="font-weight: bold">
            <div slot="header" class="accept_more_operate_moreForm_collapse_head">
              <a-row :gutter="48" style="width: 100%">
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="申请人：">
                    <a-input v-model="queryParam.f_applyname" placeholder="请输入申请人" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="被申请人：">
                    <a-input v-model="queryParam.f_targetname" placeholder="请输入被申请人" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="程序类型：">
                    <a-select
                      v-model="queryParam.f_proctype"
                      style="width: 200px; font-weight: normal"
                      placeholder="请选择程序类型"
                      allowClear
                    >
                      <a-select-option v-for="item in Tp_apptypeList" :key="item.value" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>

            <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
              <a-col @click.stop="() => {}" :md="8" :sm="24">
                <a-form-item label="来源：">
                  <a-select
                    v-model="queryParam.f_source"
                    style="width: 220px; font-weight: normal"
                    placeholder="请选择来源"
                    allowClear
                  >
                    <a-select-option v-for="item in Tp_applysourceList" :key="item.value" :value="item.value">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col @click.stop="() => {}" :md="12" :sm="24">
                <a-form-item label="申请日期：">
                  <a-date-picker
                    v-model="queryParam.accepttime_start"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="开始日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="accepttimeListen()"
                  />
                  ~
                  <a-date-picker
                    v-model="queryParam.accepttime_end"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="结束日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="accepttimeListen()"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>

    <template slot="content">
      <div class="accept_content_table">
        <!-- 表格数据 -->
        <a-table
          :scroll="scroll"
          :columns="ucolumns"
          :data-source="listData"
          :pagination="upagination"
          :loading="loading"
          rowKey="taskid"
          @change="tableChange"
          size="middle"
          :bordered="ubordered"
          :rowClassName="rowClassName"
          :components="header"
          ref="table"
          :key="tableCountKey"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
          </span>
          <div slot="casestatusSlot" slot-scope="casestatus" class="beyond_hiding" style="width: 100%">
            {{ casestatus in St_admreviewKey ? St_admreviewKey[casestatus].name : '' }}
          </div>
          <!-- 申请人 -->
          <div slot="applynameSlot" slot-scope="applyname" class="beyond_hiding" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ applyname }}</span>
              </template>
              {{ applyname }}
            </a-tooltip>
          </div>
          <!-- 被申请人 -->
          <div
            slot="targetnameSlot"
            slot-scope="targetname"
            class="beyond_hiding"
            style="width: 100%; text-align: left"
          >
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ targetname }}</span>
              </template>
              {{ targetname }}
            </a-tooltip>
          </div>

          <!-- 	案件来源 -->
          <div slot="sourceSlot" slot-scope="source" class="beyond_hiding" style="width: 100%">
            {{ source in Tp_applysourceMap ? Tp_applysourceMap[source] : '' }}
          </div>

          <!-- 	案件状态 -->
          <div slot="decisiontypeSlot" slot-scope="decisiontype" class="beyond_hiding" style="width: 100%">
            {{ decisiontype in Tp_decision ? Tp_decision[decisiontype].name : '' }}
          </div>

          <!-- 	结案类型 -->
          <div slot="statusSlot" slot-scope="status" class="beyond_hiding" style="width: 100%">
            {{ status in St_apply ? St_apply[status].name : '' }}
          </div>

          <!-- 	程序类型 -->
          <div slot="proctypeSlot" slot-scope="proctype" class="beyond_hiding" style="width: 100%">
            {{ proctype in Tp_apptype ? Tp_apptype[proctype].name : '' }}
          </div>

          <!-- 受理人 -->
          <div
            slot="dealNameSlot"
            slot-scope="text, record"
            class="beyond_hiding"
            style="width: 100%; text-align: left"
          >
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ dealNameLabel(record) }}</span>
              </template>
              {{ dealNameLabel(record) }}
            </a-tooltip>
          </div>

          <div slot="subtimeSlot" slot-scope="subtime" class="beyond_hiding" style="width: 100%">
            {{ subtime | getTimeFormat('YYYY年M月D日') }}
          </div>

          <span slot="operation" slot-scope="text, record">
            <template>
              <a href="javascript:;" @click="view(record)">详情</a>
              <!-- <a-divider type="vertical" />
                <a href="javascript:;" @click="handle(record)">处理</a> -->
            </template>
          </span>
        </a-table>
      </div>
    </template>
  </AcceptHandleHeadComponent>
</template>

<script>
import drag from '@/components/TableDrag/drag'
import { Tp_applysourceMap, Tp_applysourceList } from '@/enumeration/Tp_applysource.js'
import { Tp_decision } from '@/enumeration/Tp_decision.js'
import { St_apply } from '@/enumeration/St_apply.js'
import { Tp_apptype, Tp_apptypeList } from '@/enumeration/Tp_apptype.js'
import { St_admreviewKey, St_admreviewList, St_admreviewValue } from '@/enumeration/St_admreview'
import { LableTitle } from '@/enumeration/LableTitle'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import storage from 'store'
import AcceptHandleHeadComponent from '@/views/accept/component/AcceptHandleHeadComponent.vue'
import { AcceptCompreQuery } from '@/api/workflow/wf_CompreQuery.js'
import { getViewTaskByInstid } from '@/api/worktasks/wt_personal.js'
const ucolumns = [
  {
    title: '序号',
    width: 50,
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '受理状态',
    width: 150,
    align: 'center',
    fixed: 'left',
    dataIndex: 'casestatus',
    scopedSlots: { customRender: 'casestatusSlot' }
  },
  {
    title: '案件编号',
    width: 250,
    dataIndex: 'acceptcode',
    align: 'center'
  },
  {
    title: '申请人',
    width: 100,
    dataIndex: 'applyname',
    align: 'center',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人',
    width: 250,
    dataIndex: 'targetname',
    align: 'center',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '承办人',
    width: 100,
    key: 'dealName',
    dataIndex: 'dealName',
    align: 'center',
    scopedSlots: { customRender: 'dealNameSlot' }
  },
  {
    title: '结案类型',
    width: 150,
    dataIndex: 'status',
    align: 'center',
    scopedSlots: { customRender: 'statusSlot' }
  },
  {
    title: '案件状态',
    width: 150,
    dataIndex: 'decisiontype',
    align: 'center',
    scopedSlots: { customRender: 'decisiontypeSlot' }
  },
  {
    title: '程序类型',
    width: 100,
    dataIndex: 'proctype',
    align: 'center',
    scopedSlots: { customRender: 'proctypeSlot' }
  },
  {
    title: '案件来源',
    width: 100,
    dataIndex: 'source',
    align: 'center',
    scopedSlots: { customRender: 'sourceSlot' }
  },
  {
    title: '申请日期',
    width: 150,
    dataIndex: 'subtime',
    align: 'center',
    scopedSlots: { customRender: 'subtimeSlot' }
  },
  {
    title: '操作',
    width: 150,
    dataIndex: 'action',
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'operation' }
  }
]
const acceptStatus = [
  St_admreviewValue.TOMEDIATE,
  St_admreviewValue.TOBACK,
  St_admreviewValue.APPEND,
  St_admreviewValue.ACCEPT,
  St_admreviewValue.NOACCEPT,
  St_admreviewValue.MEDIATE,
  St_admreviewValue.BACK
]
export default {
  data () {
    return {
      ucolumns: ucolumns,
      // columns: columns,
      cardColumns: ucolumns,
      queryParam: {
        f_applyname: undefined, // 申请人
        f_targetname: undefined, // 被申请人
        f_code: undefined, // 案号
        f_source: undefined, // 案件来源
        f_status: undefined, // 行政复议状态
        f_proctype: undefined, // 程序类型
        accepttime_start: undefined, // 申请开始时间
        accepttime_end: undefined, // 申请结束时间
        pageNumber: 1,
        pageSize: 20
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      mixins: [drag],
      Tp_applysourceMap: Tp_applysourceMap,
      Tp_decision: Tp_decision,
      St_apply: St_apply,
      Tp_apptype: Tp_apptype,
      St_admreviewKey: St_admreviewKey,
      St_admreviewList: [],
      St_admreviewValue: {},
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      sourceType: [],
      LableTitle: LableTitle,
      header: undefined,
      tableCountKey: 0,
      collapseKey: [1], // 折叠面板key
      Tp_apptypeList: Tp_apptypeList, // 程序类型
      Tp_applysourceList: Tp_applysourceList, //来源
      scroll: { x: 1000, y: 410 }
    }
  },
  components: {
    AcceptHandleHeadComponent
  },
  computed: {},
  created () {
    console.log('this.$route.query.queryParam.queryList', this.$route.query.queryParam)
    let routeParam
    try {
      routeParam = JSON.parse(JSON.stringify(this.$route.query.queryParam))
      this.queryParam = { ...this.queryParam, ...this.$route.query.queryParam }
    } catch {
      console.log('路由传参非json格式')
    }
    
    // const acceptStatus = [St_admreviewValue.TOMEDIATE, St_admreviewValue.TOBACK, St_admreviewValue.APPEND, St_admreviewValue.ACCEPT, St_admreviewValue.NOACCEPT, St_admreviewValue.MEDIATE, St_admreviewValue.BACK]
    this.St_admreviewList = St_admreviewList.filter(el => acceptStatus.includes(el.value))
    for (const key in St_admreviewValue) {
      if (acceptStatus.includes(St_admreviewValue[key])) {
        this.St_admreviewValue[key] = St_admreviewValue[key]
      }
    }
    this.headerChange()
    // 待处理人员
    this.initDefaultParam()
    this.queryDoneTaskList()
  },
  mounted () {},
  watch: {
    ucolumns: {
      handler (newValue, oldVal) {
        this.headerChange()
      },
      deep: true // 深度监听
    }
  },
  methods: {
    myEvent (e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 410
      }
    },
    // 查看操作
    async view (record) {
      const { data } = await getViewTaskByInstid(record.processinstanceid)
      if (data == null) {
        this.$message.error('未找到taskid')
        return
      }
      this.$router.push({
        path: `/AcceptRecordHandleOperation/${data}/4`,
        query: {
          url: '/AcceptRecordCaselist',
          queryParam: this.queryParam
        }
      })
    },
    headerChange () {
      console.log('移动后', this.ucolumns)
      this.header = {
        header: {
          cell: drag.methods.initDrag(this.ucolumns)
        }
      }
    },
    setColumns (columns) {
      console.log('重置前', this.ucolumns)
      // tableCountKey自增是为了让表格控件每次销毁强制更新
      this.tableCountKey += 1
      this.ucolumns = columns
      // this.ucolumns = columns
      console.log('重置后', this.ucolumns)
    },
    onSearch (val) {
      this.queryParam.f_code = val
      this.queryParam.pageNumber = 1
      this.queryParam.pageSize = 20
      this.queryDoneTaskList()
    },

    // 接收时间监听判断开始结束日期是否合理
    accepttimeListen () {
      if (
        this.queryParam.accepttime_start > this.queryParam.accepttime_end &&
        this.queryParam.accepttime_start &&
        this.queryParam.accepttime_end
      ) {
        this.queryParam.accepttime_start = undefined
      }
    },
    /**
     * 初始化设置默认值
     */
    initDefaultParam () {
      this.queryParam.f_status = acceptStatus.join(',')
      this.sourceType = this.Tp_applysource
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery () {
      this.queryParam = {
        f_applyname: undefined, // 申请人
        f_targetname: undefined, // 被申请人
        f_code: undefined, // 案号
        f_source: undefined, // 案件来源
        f_status: undefined, // 行政复议状态
        f_proctype: undefined, // 程序类型
        accepttime_start: undefined, // 申请开始时间
        accepttime_end: undefined, // 申请结束时间
        pageNumber: 1,
        pageSize: 20
      }
      this.initDefaultParam()
      this.queryDoneTaskList()
    },

    tableChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryDoneTaskList()
    },
    // 其他tab页触发修改当前页事件
    tableChangeOther (upagination) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryDoneTaskList()
    },

    queryDoneTaskList () {
      this.queryList(this.getCpQueryParam())
    },

    getCpQueryParam () {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.accepttime_start?.format) {
        cpQueryParam.accepttime_start = this.queryParam.accepttime_start.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.accepttime_end?.format) {
        cpQueryParam.accepttime_end = this.queryParam.accepttime_end.format('YYYY-MM-DD') + ' 23:59:59'
      }
      return cpQueryParam
    },

    queryList () {
      const queryParamCopy = this.getCpQueryParam()
      if (queryParamCopy.f_applyname) {
        queryParamCopy.f_applyname = queryParamCopy.f_applyname.toString().trim()
      }
      if (queryParamCopy.f_targetname) {
        queryParamCopy.f_targetname = queryParamCopy.f_targetname.toString().trim()
      }
      if (queryParamCopy.f_code) {
        queryParamCopy.f_code = queryParamCopy.f_code.toString().trim()
      }
      this.loading = true
      AcceptCompreQuery(queryParamCopy)
        .then(res => {
          console.log('表格数据:', res.data)
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.listData = res.data.records
            // 将当前页码和数量与后台绑定
            this.upagination.total = res.data.total
            this.upagination.current = res.data.current
            this.upagination.pageSize = res.data.size
            this.needDealNum = res.data.total
          }
        })
        .catch(err => {
          this.listData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 程序类型显示
     */
    proctypeLabel (record) {
      const proctype = record.proctype_bz || record.proctype_bs
      const enumItem = this.$store.getters.getEnumItem('Tp_apptype').filter(item => item.value == proctype)[0]
      return enumItem ? enumItem.label : ''
    },
    rowClassName (record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },
    /**
     * 案件承办人
     * @param {} record
     */
    dealNameLabel (record) {
      let dealName = record.hearfirstname || record.acceptfirstname
      if (dealName && (record.hearsecondname || record.acceptsecondname)) {
        dealName = dealName + '，' + (record.hearsecondname || record.acceptsecondname)
      }
      return dealName
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';
</style>

<style lang="scss" scoped>
.accept_content {
  &_table {
    &_font_red {
      color: #ca0000;
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
    }
    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
      color: #2c2c2c;
    }

    ::v-deep .ant-table-thead > tr > th {
      height: 50px;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 600;
      color: #2c2c2c;
    }

    // ::v-deep .ant-pagination-total-text {
    //   font-size: 16px;
    //   font-family: 'PingFang-SC-Heavy';
    //   font-weight: 400;
    //   color: #8e97b9;
    // }

    ::v-deep .ant-table-body,
    .ant-table-header {
      word-break: break-all;

      &::-webkit-scrollbar {
        width: 10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        // height: 10px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #a2c6e1;
      }

      &::-webkit-scrollbar-track {
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: transparent;
      }
    }
  }
}
</style>
